<template>
    <div>
        {{obj.name}}今年{{obj.age}}岁了,性别：{{obj.sex}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            obj:{name:'小明',age:'15'},
        }
    },
    mounted(){
        setTimeout(()=>{
            //vue里对对象新增属性是不能自动数据监听的
            // this.obj.name='小明',
            // this.obj.age='15',
            const sex ='男'
            //对data里的对象添加新属性是不能使页面更新的
            // this.obj.sex=sex;
            //使用$set()或者合并对象
            // $set(被监听的对象数据,新增的属性,新增的值)
            // this.$set(this.obj,"sex",sex);
            //做合并的
            // this.obj=Object.assign({},this.obj,{sex:sex})
            this.obj=Object.assign({sex:sex},{...this.obj})
        },1000)
    }
}
</script>

<style>

</style>